<template>
	<view class="content">
		<p style="margin-bottom: 40rpx;">基础用法</p>
		<div style="display: flex;justify-content: space-between;">
			<popover :actions="actions" @select="onSelect" placement="bottom-start" :width="300">
				<template slot="reference">
					<button>浅色风格</button>
				</template>
			</popover>
			<popover :actions="actions" theme="dark" placement="bottom-end" @select="onSelect" :width="300">
				<template slot="reference">
					<button>深色风格</button>
				</template>
			</popover>
		</div>
		<p style="margin: 40rpx 0;">位置</p>
		<div style="display: flex;justify-content: space-between;margin-bottom:20rpx;">
			<popover :actions="actions" @select="onSelect" placement="bottom-start" :width="300">
				<template slot="reference">
					<button>bottom-start</button>
				</template>
			</popover>
			<popover :actions="actions" placement="bottom-end" @select="onSelect" :width="300">
				<template slot="reference">
					<button>bottom-end</button>
				</template>
			</popover>
		</div>
		<div style="display: flex;margin-bottom:20rpx;justify-content: center;">
			<popover :actions="actions" @select="onSelect" placement="bottom" :width="300">
				<template slot="reference">
					<button>bottom</button>
				</template>
			</popover>
		</div>
		<div style="display: flex;justify-content: space-between;margin-bottom:20rpx;">
			<popover :actions="actions" @select="onSelect" placement="top-start" :width="300">
				<template slot="reference">
					<button>top-start</button>
				</template>
			</popover>
			<popover :actions="actions" placement="top-end" @select="onSelect" :width="300">
				<template slot="reference">
					<button>top-end</button>
				</template>
			</popover>
		</div>
		<div style="display: flex;margin-bottom:20rpx;justify-content: center;">
			<popover :actions="actions" @select="onSelect" placement="top" :width="300">
				<template slot="reference">
					<button>top</button>
				</template>
			</popover>
		</div>
		<p style="margin: 40rpx 0;">自定义内容</p>
		<div style="display: flex;margin-bottom:20rpx;">
			<popover placement="top-start" :width="400">
				<template slot="reference">
					<button>自定义内容</button>
				</template>
				<div class="grid">
					<div class="grid-item" v-for="item in 8" :key="item" @click="clickGrid(item)">{{item}}</div>
				</div>
			</popover>
		</div>
	</view>
</template>

<script>
	import popover from '../../component/popover.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				actions: [{
						text: '选项一选项一',
						disabled: true
					},
					{
						text: '选项二选项二',
					},
					{
						text: '选项三选项三'
					},
				]
			}
		},
		components: {
			popover
		},
		onLoad() {

		},
		methods: {
			onSelect(action) {
				console.log(action)
			},
			clickGrid(item) {
				console.log(item)
			}
		}
	}
</script>

<style>
	.content {
		position: relative;
		padding: 20px;
		padding-bottom: 120rpx;
	}

	.popover {
		margin-bottom: 10px;
	}

	.grid {
		display: flex;
		height: 140rpx;
		flex-wrap: wrap;
	}

	.grid-item {
		flex: none;
		width: 98rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
